<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="point-box flexWarpCenterColumn">
					<image src="" class="success-icon"></image>
					<view class="point-name">开台成功</view>
					<view class="point-cont flexWarpCenterColumn">
						<text>下单后，先开灯，点击关灯结算时扫码支付</text>
					</view>
				</view>
				<view class="order-box">
					<view class="order-item">
						<view class="item-top flexWrap">
							<view class="order-info flexWarpColumn">
								<view class="order-name">
									<text>{{orderInfo.store_equipment_name||'加载中...'}}</text>
									<text class="shop-name">{{orderInfo.shop_name||'加载中...'}}</text>
								</view>
								<view class="order-time">先打后付</view>
								<view class="order-date">{{orderInfo.service_date||'加载中...'}} {{orderInfo.start_time||'加载中...'}}</view>
								<view class="order-btn noStarted" @tap.stop="goPage('/pages/manage/confirmOrder?order_id='+orderInfo.id)">关灯/结算</view>
							</view>
							<view class="order-img">
								<image src="../../static/index/tableImg.png"></image>
							</view>
						</view>
						<view class="item-bottom flexWrap" @tap="goOrderDetails()">
							<view>下单时间：{{orderInfo.createtime||'加载中...'}}</view>
							<view>详情 <text class="icon-more"></text> </view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				orderInfo:{
					
				},
				tipsFlage:false,
				order_id:"",
				showIndex:0,
				isSuccess:1
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onLoad(ops) {
			this.order_id=ops.order_id
			uni.showLoading({
				title:'加载中...',
				mask:true
			})
			this.orderDetails();
		},
		methods: {
			showTips(showIndex){
				this.tipsFlage=true
				this.showIndex=showIndex
			},
			closeTips(){
				this.tipsFlage=false
			},
			// 订单详情
			orderDetails(){
				this.$request.post(this.$api.orderDetails, {
					order_id:this.order_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.orderInfo=data
						this.orderInfo.createtime = this.$tools.formatDate(this.orderInfo.createtime)
						this.orderInfo.service_start_time = this.$tools.formatDate(this.orderInfo.service_start_time,0)
						this.orderInfo.service_end_time =this.orderInfo.service_end_time?this.$tools.formatDate(this.orderInfo.service_end_time,0):''
						this.orderInfo.service_date=this.orderInfo.service_start_time.split(' ')[0]
						this.orderInfo.start_time=this.orderInfo.service_start_time.split(' ')[1]
						this.orderInfo.end_time=this.orderInfo.service_end_time?this.orderInfo.service_end_time.split(' ')[1]:''
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			goOrderDetails(){
				uni.navigateTo({
					url:"/pages/order/orderDetails?order_id="+this.order_id
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 20upx;
	}
	.point-box{
		margin-bottom: 54upx;
		.success-icon{
			width: 80upx;
			height: 80upx;
		}
		.point-name{
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 66px;
			color: #26BCFD;
		}
		.point-cont{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #FFFFFF;
		}
	}
	.order-box{
		margin-top: 34upx;
		.order-item{
			min-height: 364upx;
			background:#1D1C5C;
			border-radius: 16upx;
			padding-top: 36upx;
			margin-bottom: 20upx;
			position: relative;
			.item-top{
				min-height: 304upx;
				padding-bottom: 10rpx;
				align-items:self-start;
				.order-info{
					padding-left: 28upx;
					min-height: 304upx;
					.order-name{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						.shop-name{
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 34upx;
							color: #999999;
							margin-left: 18upx;
						}
					}
					.order-time{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 44upx;
						color: #26BCFD;
						margin-top: 14upx;
					}
					.order-date{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 34upx;
						color: #FFFFFF;
						margin-top: 10upx;
					}
					.order-btn{
						width: 200upx;
						height: 70upx;
						line-height: 70upx;
						text-align: center;
						border: 2upx solid #26BCFD;
						border-radius: 16upx;
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 26upx;
					}
					.noStarted{
						background-color: #26BCFD;
					}
					.end{
						color: #707070;
						border: 2upx solid #707070;
					}
				}
				.order-img{
					width: 304upx;
					height: 304upx;
					flex: none;
				}
			}
			button::after {
				border: none;
			}
			button {
				margin-left: 0;
				margin-right: 0;
				padding-left: 0;
				padding-right: 0;
				line-height: 1;
				color: #FFFFFF;
				font-size: 28rpx;
				background: none;
				width: 100%;
				border: none;
			}
			.open-box{
				padding: 30rpx;
				padding-top: 0;
				.open-btn{
					width: 304rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2upx solid #26BCFD;
					border-radius: 16upx;
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.share{
					background: #26BCFD;
					width: 304rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2rpx solid #5BB9F7;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					border-radius: 20rpx;
				}
			}
			.item-bottom{
				height: 60upx;
				background: #353484;
				border-radius: 0px 0px 16upx 16upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 60upx;
				color: #999999;
				padding: 0 28upx;
				.icon-more{
					border-color: #969696;
					width: 12upx;
					height: 13upx;
					margin-left: 10upx;
				}
			}
			.order-status{
				width: 136upx;
				height: 44upx;
				background: #2CA522;
				border-radius: 0px 16upx 0px 16upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #FFFFFF;
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.tips-box{
		width: 660upx;
		height: 390upx;
		background:#1D1C5C;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #FFFFFF;
			margin: 90upx 0;
		}
		.btn-box{
			margin-top: 10upx;
			.tips-btn{
				width: 240upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #26BCFD;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
			.noStarted{
				background-color: #26BCFD;
				margin-left: 28upx;
			}
		}
	}
</style>
